<!--  -->
<template>
  <div id="cesiumContainer"></div>
  <!--<el-button type="primary" @click="modify" style="margin-left: 300px">修改图层</el-button>-->

</template>

<script>
import * as Cesium from '../Cesium/Cesium'
require('../Cesium/Widgets/widgets.css')
export default {
  data () {
    return {
      viewer: null,
      tiandituTk: 'fa16e0c4bc5e5106d74609935e155b9d',
      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
    }
  },
  props: {
    mapImageType: {
      type: String,
      default: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk='
    }
  },
  components: {},
  computed: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        // creditContainer: "credit",
        creditsDisplay: false,
        timeline: false,
        fullscreenButton: false,
        // vrButton: false,
        infoBox: false,
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          // 影像底图
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + this.tiandituTk,
          layer: 'tdtVecBasicLayer',
          style: 'default',
          format: 'image/jpeg',
          tileMatrixSetID: 'GoogleMapsCompatible',
          show: false
        })
      })
      this.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        // 影像注记
        url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + this.tiandituTk,
        subdomains: this.subdomains,
        layer: 'tdtCiaLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: true
      }), 10)

      // 将三维球定位到中国
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 30000000),
        orientation: {
          heading: Cesium.Math.toRadians(348.4202942851978),
          pitch: Cesium.Math.toRadians(-89.74026687972041),
          roll: Cesium.Math.toRadians(0)
        },
        complete: function callback () {
          // 定位完成之后的回调函数
        }
      })
    },

    changeBaseMap (type) {
      this.viewer.imageryLayers.removeAll()
      switch (type) {
        // 天地图
        case 'tdt':
          this.viewer.imageryLayers.addImageryProvider(
            new Cesium.WebMapTileServiceImageryProvider({
              url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + this.tiandituTk,
              layer: 'tdtBasicLayer',
              style: 'default',
              format: 'image/jpeg',
              tileMatrixSetID: 'GoogleMapsCompatible',
              show: false,
              maximumLevel: 16
            }), 1
          )
          break
        // 天地图矢量
        case 'tdtsl':
          this.viewer.imageryLayers.addImageryProvider(
            new Cesium.WebMapTileServiceImageryProvider({
              url: 'http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + this.tiandituTk,
              layer: 'tdtVecBasicLayer',
              style: 'default',
              format: 'image/jpeg',
              tileMatrixSetID: 'GoogleMapsCompatible',
              show: false
            }), 1
          )
          break
      }
      this.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
        // 影像注记
        url: 'http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=' + this.tiandituTk,
        subdomains: this.subdomains,
        layer: 'tdtCiaLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible',
        show: true
      }), 10)
    }
  },
  watch: {
    /* -----watch------ */
    mapImageType: {
      handler (newVal) { // ...
        this.changeBaseMap(newVal)
      },
      deep: true
    }
  }
}
</script>
<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
/deep/ .cesium-widget-credits {
  display: none !important;
  visibility: hidden !important;
}
</style>
